<template>
  <div class="home">
    <div class="carousel-content">
      <a-carousel arrows autoplay>
        <div slot="prevArrow" class="custom-slick-arrow" style="left: 10px;zIndex: 1">
          <a-icon type="left-circle" />
        </div>
        <div slot="nextArrow" class="custom-slick-arrow" style="right: 10px">
          <a-icon type="right-circle" />
        </div>
        <div><img src="../assets/image/home/banner.png" height="380px" width="100%" /></div>
        <div><img src="../assets/image/home/banner2.png" height="380px" width="100%" /></div>
        <div><img src="../assets/image/home/banner3.png" height="380px" width="100%" /></div>
      </a-carousel>
    </div>
    <div class="product-type">
      <ul>
        <li>
          <img src="" alt="" height="90px" width="90px" />
          <span class="product-type-des"><b>通用算力</b></span>
        </li>
        <li>
          <img src="" alt="" height="90px" width="90px" />
          <span class="product-type-des">AI算力</span>
        </li>
        <li>
          <img src="" alt="" height="90px" width="90px" />
          <span class="product-type-des">云存储</span>
        </li>
        <li>
          <img src="" alt="" height="90px" width="90px" />
          <span class="product-type-des">智能编程框架</span>
        </li>
        <li>
          <img src="" alt="" height="90px" width="90px" />
          <span class="product-type-des">高性能算力</span>
        </li>
        <li>
          <img src="" alt="" height="90px" width="90px" />
          <span class="product-type-des">专有网络</span>
        </li>
      </ul>
    </div>
    <div class="product-hot">
      <div class="product-hot-inner">
        <div class="product-hot-tip">
          <!--  <img src="" alt="" height="68px" width="1200px" /> -->
          <p class="product-hot-title">热门产品<span class="product-hot-en">HOT</span></p>
        </div>
        <div class="product-hot-example">
          <ul>
            <li v-for="item in productions" :key="item.name">
              <div class="hot-example-img">
                <img src="../assets/image/home/banner.png" alt="" />
              </div>
              <p class="hot-example-title">{{ item.name }}</p>
              <p class="hot-example-des">
                {{ item.info }}
              </p>
              <div class="hot-example-tag">
                <ul>
                  <li v-for="val in item.tag" :key="val" class="hot-example-tag-detail">{{ val }}</li>
                </ul>
              </div>
              <div class="hot-example-bottom">
                <div class="hot-example-bottom-left">
                  <!-- <span class="hot-example-sign">￥</span><span v-html="$options.filters.filterM('189.32') "></span>&nbsp;&nbsp; -->
                  <span style="font-size:30px;color:#fa7321">{{ item.price }}</span>
                  <span class="hot-example-date">算力豆/月起</span>
                </div>
                <div class="hot-example-bottom-right">
                  <a-button type="primary" class="buy-btn" @click="productDetail(item)">购买</a-button>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="resource">
      <div class="resource-title">- 汇聚资源 -</div>
      <div class="resource-inner">
        <div class="resource-inner-example">
          <img src="" alt="" />
          <p class="resource-inner-example-tip">高通量计算资源</p>
          <p>
            <span>{{ resourceOne }}</span
            >&nbsp;pflops
          </p>
          <div class="fix-bottom"></div>
        </div>
        <div class="resource-inner-example">
          <img src="" alt="" />
          <p class="resource-inner-example-tip">人工智能算力资源</p>
          <p>
            <span>{{ resourceTwo }}</span
            >&nbsp;pflops
          </p>
          <div class="fix-bottom"></div>
        </div>
        <div class="resource-inner-example">
          <img src="" alt="" />
          <p class="resource-inner-example-tip">高性能算力资源</p>
          <p>
            <span>{{ resourceThree }}</span
            >&nbsp;pflops
          </p>
          <div class="fix-bottom"></div>
        </div>
        <div class="resource-inner-example">
          <img src="" alt="" />
          <p class="resource-inner-example-tip">存储资源</p>
          <p>
            <span>{{ resourceFour }}</span
            >&nbsp;PB
          </p>
          <div class="fix-bottom"></div>
        </div>
        <div class="resource-inner-example">
          <img src="" alt="" />
          <p class="resource-inner-example-tip">骨干网络资源</p>
          <p>
            <span>{{ resourceFive }}</span
            >&nbsp;G
          </p>
          <div class="fix-bottom"></div>
        </div>
      </div>
    </div>
    <div class="application">
      <div class="application-title">- 应用切片 -</div>
      <div class="application-example">
        <img src="" alt="" />
        <p class="application-example-tip">教育切片</p>
      </div>
      <div class="application-example">
        <img src="" alt="" />
        <p class="application-example-tip">计算医学切片</p>
      </div>
      <div class="application-example">
        <img src="" alt="" />
        <p class="application-example-tip">物联应用切片</p>
      </div>
      <div class="application-example">
        <img src="" alt="" />
        <p class="application-example-tip">生物信息切片</p>
      </div>
      <div class="application-example">
        <img src="" alt="" />
        <p class="application-example-tip">云计算实验切片</p>
      </div>
      <div class="application-example">
        <img src="" alt="" />
        <p class="application-example-tip">研发测试切片</p>
      </div>
    </div>
    <div class="community">
      <div class="community-inner">
        <div class="community-tips">
          <div class="community-tips-title">
            <p class="community-tips-title-left">圈子</p>
            <p class="community-tips-title-right">查看更多</p>
          </div>
          <div style="margin:28px 24px 9px 24px;">
            <div class="community-content-left">
              <div class="community-content-left-title"><img src="" alt="" /><span>&nbsp;用户贡献排行榜</span></div>

              <div v-show="contributions.length > 0" class="community-content-left-list">
                <div style="color:#333;font-size:14px;width:275px;height:40px;line-height:40px;margin-bottom:16px">
                  <div style="width:41px;text-align:left;display:inline-block;margin-right:35px">名次</div>
                  <div style="width:85px;text-align:right;display:inline-block;margin-right:30px">用户名</div>
                  <div style="width:73px;text-align:right;display:inline-block">获得奖励</div>
                </div>
                <div v-for="(item, index) in contributions" :key="index" class="community-content-left-item">
                  <div class="community-content-left-item-left" v-html="$options.filters.filterOrder(index)"></div>
                  <div class="community-content-left-item-center">
                    <img src="" alt="" width="22px" height="22px" style="display:inline-block" />
                    <span>&nbsp;{{ item.name }}</span>
                  </div>
                  <div class="community-content-left-item-right">+{{ item.contribution }}贡献度</div>
                </div>
              </div>
              <a-empty v-show="contributions.length == 0" style="margin-top:60px" />
            </div>
            <div class="community-content-right">
              <div class="community-content-right-title"><img src="" alt="" /><span>&nbsp;优质建议</span></div>
              <div v-show="suggestions.length > 0" style="margin-top:25px;height:310px;width:376px;">
                <div v-for="(item, index) in suggestions" :key="index" class="tips-content">
                  <span class="tips-content-p">{{ item.title }}</span>
                  <div class="tips-content-info">
                    <img src="" alt="" /><span style="color:#333;padding-right:10px;">{{ item.name }}</span
                    ><span style="color:#85899f">{{ item.time }}</span>
                  </div>
                </div>
              </div>
              <a-empty v-show="suggestions.length == 0" style="margin-top:60px" />
            </div>
          </div>
        </div>
        <div class="community-news">
          <div class="community-news-title">
            <p class="community-tips-title-left">新闻动态</p>
            <p class="community-tips-title-right">查看更多</p>
          </div>
          <div class="community-news-content">
            <div class="community-news-main">
              <div class="community-news-main-left">
                <div v-show="newoneTitle != ''" class="radius-span"></div>
                <p class="community-news-main-left-title">{{ newoneTitle }}</p>
                <p class="community-news-main-left-content">{{ newoneContent }}</p>
              </div>
              <div class="community-news-main-right">
                <img src="" alt="" />
              </div>
            </div>
            <div v-for="(item, index) in news" :key="index" class="community-news-item">
              <div class="radius-span news-item-span"></div>
              <div class="item-tip">{{ item.title }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="station">
      <div class="station-title">- 信息高铁站 -</div>
      <div class="station-example">
        <div class="station-example-inner">
          <img src="" alt="" />
          <p class="station-example-name">北京中关村</p>
        </div>
        <div class="station-example-inner">
          <img src="" alt="" />
          <p class="station-example-name">北京环保园</p>
        </div>
        <div class="station-example-inner">
          <img src="" alt="" />
          <p class="station-example-name">南京南研院</p>
        </div>
        <div class="station-example-inner">
          <img src="" alt="" />
          <p class="station-example-name">盐城高通量中心</p>
        </div>
      </div>
    </div>
    <div class="back-img">
      <img src="" alt="" />
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { resourceList, newsList, contribution, suggestion, production } from '@/api/home'
import store from '@/store'
export default {
  name: 'Home',
  components: {},
  filters: {
    filterM: function(value) {
      return (
        '<span style="font-size: 30px;color: #fa7321;">' +
        value.split('.')[0] +
        '</span>' +
        '<span style="font-size: 16px;color: #fa7321;">.' +
        value.split('.')[1] +
        '</span>'
      )
    },
    filterOrder: function(value) {
      if (value < 3) {
        return `<span style="color: #fa7321;font-size:14px">TOP${value + 1}</span>`
      } else {
        return value
      }
    }
  },
  data() {
    return {
      resourceOne: '',
      resourceTwo: '',
      resourceThree: '',
      resourceFour: '',
      resourceFive: '',
      newoneTitle: '',
      newoneContent: '',
      news: [],
      contributions: [],
      suggestions: [],
      productions: []
    }
  },
  mounted() {
    this.getResource()
    this.getNews()
    this.getContribution()
    this.getSuggestion()
    this.getProduction()
    this.getUserInfo()
  },
  methods: {
    getResource() {
      const tmp = this
      resourceList({})
        .then(response => {
          for (const i of response.data) {
            if (i.type == '1') {
              tmp.resourceOne = i.amount
            }
            if (i.type == '2') {
              tmp.resourceTwo = i.amount
            }
            if (i.type == '3') {
              tmp.resourceThree = i.amount
            }
            if (i.type == '4') {
              tmp.resourceFour = i.amount
            }
            if (i.type == '5') {
              tmp.resourceFive = i.amount
            }
          }
        })
        .catch(function(error) {
          console.log(error)
        })
    },
    getNews() {
      const tmp = this
      newsList({ pageSize: '7', currentPage: '1', type: '1' })
        .then(response => {
          for (const i of response.data) {
            if (i.id == '1') {
              tmp.newoneTitle = i.title
              tmp.newoneContent = i.content
            } else {
              tmp.news.push({ title: i.title, content: i.content })
            }
          }
        })
        .catch(function(error) {
          console.log(error)
        })
    },
    getContribution() {
      const tmp = this
      contribution({ pageSize: '6', currentPage: '1' })
        .then(response => {
          for (const i of response.data) {
            if (i.contribution) {
              tmp.contributions.push({ name: i.name, contribution: i.contribution })
            }
          }
        })
        .catch(function(error) {
          console.log(error)
        })
    },
    getSuggestion() {
      const tmp = this
      suggestion({ typeList: ['2'], pageSize: '4', currentPage: '1', order: 'desc', statusList: ['4'] })
        .then(response => {
          for (const i of response.data) {
            tmp.suggestions.push({ title: i.content, name: i.name, time: i.createTime })
          }
        })
        .catch(function(error) {
          console.log(error)
        })
    },
    getProduction() {
      const tmp = this
      // 修改接口，目前首页的热门产品通过调用分页的，并且为在线状态的
      const param = {
        pageSize: 3,
        currentPage: 1
      }
      production(param)
        .then(response => {
          for (const i of response.data.rows) {
            if (tmp.productions.length < 3) {
              tmp.productions.push({
                name: i.name,
                tag: i.tag.split(';'),
                price: i.minPrice,
                info: i.description,
                id: i.id
              })
            }
          }
          console.log(response)
        })
        .catch(function(error) {
          console.log(error)
        })
    },
    productDetail(value) {
      const obj = value
      if (obj.name.indexOf('GPU云服务器') >= 0) {
        this.$router.push({ path: '/detail/cloud-detail', query: { productId: obj.id, productName: obj.name } })
      } else if (obj.name.indexOf('通用云服务器') >= 0) {
        this.$router.push({ path: '/detail/public-serve', query: { productId: obj.id, productName: obj.name } })
      } else if (obj.name.indexOf('弹性公网IP') >= 0) {
        this.$router.push({ path: '/detail/ip-detail', query: { productId: obj.id, productName: obj.name } })
      }
    },
    getUserInfo() {
      console.log(store)
      store.dispatch('GetInfo')
    }
  }
}
</script>
<style scoped lang="less">
@centerMargin: 0 auto;
@title-size: 16px;
@title-color: #333;
@priceColor: #fa7321;
.radius-span {
  width: 6px;
  height: 6px;
  background-color: #d8d8d8;
  border-radius: 50%;
  display: inline-block;
}
.span-left {
  display: inline-block;
  font-size: 16px;
  color: #333;
  float: left;
}
.span-right {
  display: inline-block;
  font-size: 12px;
  color: #6d6c6c;
  float: right;
}
.community-contribution-title {
  height: 48px;
  width: 100%;
  background-image: url(../assets/image/home/banner.png);
  padding-left: 20px;
  padding-right: 20px;
  line-height: 48px;
}
.contribution-list {
  padding: 15px 20px;
  .contribution-list-item-left {
    width: 35px;
    display: inline-block;
    text-align: center;
  }
  .contribution-list-item-center {
    width: 90px;
    display: inline-block;
    text-align: right;
    margin-right: 21px;
  }
  .contribution-list-item-right {
    width: 90px;
    display: inline-block;
    text-align: right;
  }
}
.contribution-list-title {
  color: #6d6c6c;
  font-size: 12px;
  height: 12px;
  line-height: 12px;
  .title-sort {
    display: inline-block;
    width: 35px;
    text-align: left;
  }
  .title-reward {
    display: inline-block;
    width: 90px;
    text-align: right;
  }
  .title-name {
    display: inline-block;
    width: 90px;
    text-align: right;
    margin-right: 21px;
  }
  .title-time {
    display: inline-block;
    width: 25px;
    margin-right: 84px;
  }
  .title-content {
    display: inline-block;
    width: 50px;
    margin-right: 100px;
  }
  .title-status {
    width: 25px;
    display: inline-block;
    margin-right: 36px;
  }
  .title-user {
    width: 84px;
    display: inline-block;
    text-align: right;
  }
}
.carousel-content {
  height: 380px;
}
.ant-carousel > .slick-slide {
  text-align: center;
  height: 380px;
  line-height: 380px;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel > .custom-slick-arrow {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: #fff;
  background-color: rgba(31, 45, 61, 0.11);
  opacity: 0.3;
}
.ant-carousel > .custom-slick-arrow:before {
  display: none;
}
.ant-carousel > .custom-slick-arrow:hover {
  opacity: 0.5;
}

.ant-carousel > .slick-slide h3 {
  color: #fff;
}
.product-type {
  margin-top: 60px;
  height: 195px;
  ul {
    width: 1200px;
    margin: @centerMargin;
    list-style: none;
    li {
      display: block;
      float: left;
      width: 96px;
      text-align: center;
      &:not(:last-child) {
        margin-right: 104px;
      }
      .product-type-des {
        display: inline-block;
        margin-top: 22px;
        color: #333;
        font-size: @title-size;
        margin-bottom: 60px;
      }
    }
  }
}
.product-hot {
  .product-hot-inner {
    width: 1200px;
    margin: @centerMargin;
    .product-hot-tip {
      margin-bottom: 10px;
      height: 68px;
      line-height: 68px;
      background-image: url(../assets/image/home/banner.png);
      .product-hot-title {
        display: inline-block;
        margin-left: 30px;
        font-size: @title-size;
        color: @title-color;
        .product-hot-en {
          display: inline-block;
          margin-left: 13px;
          color: #ff6a00;
        }
      }
    }
    .product-hot-example {
      ul {
        padding: 0px;
        list-style: none;
        li {
          border: solid 1px red;
          display: block;
          float: left;
          width: 380px;
          height: 418px;
          &:not(:last-child) {
            margin-right: 30px;
          }
          .hot-example-img {
            width: 380px;
            height: 146px;
            margin-bottom: 28px;
            img {
              width: 380px;
              height: 146px;
            }
          }
          .hot-example-title {
            margin-left: 30px;
            font-size: @title-size;
            color: @title-color;
          }
          .hot-example-des {
            margin-top: 20px;
            width: 320px;
            height: 60px;
            margin-left: 30px;
            font-size: 12px;
            color: #6d6c6c;
          }
          .hot-example-tag {
            margin-left: 30px;
            margin-top: 18px;
            width: 320px;
            .hot-example-tag-detail {
              color: #adadad;
              width: auto;
              padding: 4px 6px;
              height: 20px;
              line-height: 8px;
              border-radius: 1px;
              border: solid 1px #b5b5b5;
              display: block;
              float: left;
              &:not(:last-child) {
                margin-right: 8px;
              }
            }
          }
          .hot-example-bottom {
            margin-top: 68px;
            margin-left: 30px;
            margin-right: 30px;
            .hot-example-bottom-left {
              height: 36px;
              line-height: 36px;
              display: inline-block;
              .hot-example-sign {
                color: @priceColor;
                font-size: 16px;
              }
              .hot-example-date {
                font-size: 12px;
                color: #6d6c6c;
                padding-left: 6px;
              }
            }
            .hot-example-bottom-right {
              float: right;
              display: inline-block;
              .buy-btn {
                width: 100px;
                height: 36px;
                border-radius: 4px;
                border: solid 1px #33b0ed !important;
                font-size: 16px;
                color: #33b0ed;
                background-color: #fff !important;
                &:hover {
                  background-color: #33b0ed !important;
                  color: #fff;
                }
              }
            }
          }
        }
      }
    }
  }
}
.resource {
  margin-top: 488px;
  height: 438px;
  background-color: #f8fafd;
  width: 100%;
  padding-top: 32px;
  .resource-title {
    font-size: 32px;
    color: #282e3f;
    width: 172px;
    margin: @centerMargin;
  }
  .resource-inner {
    padding-top: 55px;
    width: 1200px;
    margin: @centerMargin;
    .resource-inner-example {
      display: inline-block;
      width: 220px;
      height: 245px;
      background-color: #feffff;
      box-shadow: 2px 1px 18px -2px #e0ecff;
      border-radius: 4px;
      &:not(:last-child) {
        margin-right: 25px;
      }
      text-align: center;
      font-size: 14px;
      color: #333333;
      img {
        margin-top: 40px;
        height: 90px;
        width: 90px;
      }
      .resource-inner-example-tip {
        margin-top: 35px;
        margin-bottom: 0px;
      }
      .fix-bottom {
        width: 100%;
        height: 8px;
        position: relative;
        bottom: -16px;
        background-color: #dfecfc;
        box-shadow: 2px 1px 18px -2px #e0ecff;
      }
    }
  }
}
.application {
  padding-top: 53px;
  width: 1200px;
  margin: @centerMargin;
  .application-title {
    font-size: 32px;
    color: #282e3f;
    width: 172px;
    margin: @centerMargin;
    margin-bottom: 76px;
  }
  .application-example {
    width: 120px;
    height: 170px;
    text-align: center;
    display: inline-block;
    &:not(:last-child) {
      margin-right: 96px;
    }
    img {
      width: 120px;
      height: 120px;
    }
    .application-example-tip {
      font-size: 16px;
      color: #333;
      margin-top: 20px;
      margin-bottom: 0px;
    }
  }
}
.community-tips-title-left {
  font-size: 18px;
  width: 75px;
  line-height: 20px;
  height: 20px;
  color: #333;
  display: inline-block;
  float: left;
  text-align: left;
}
.community-tips-title-right {
  font-size: 14px;
  width: 80px;
  line-height: 20px;
  height: 20px;
  color: #6d6c6c;
  display: inline-block;
  float: right;
  text-align: right;
}
.community {
  margin-top: 74px;
  height: 567px;
  background-color: #f8fafd;
  width: 100%;
  .community-inner {
    width: 1200px;
    margin: @centerMargin;
    padding-top: 40px;
    .community-tips {
      background-color: #fff;
      height: 488px;
      width: 733px;
      border: solid 1px #efefef;
      display: inline-block;
      margin-right: 20px;
      float: left;
      .community-tips-title {
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 20px;
        background-image: url(../assets/image/home/banner.png);
        height: 60px;
      }
      .community-content-left {
        margin-right: 20px;
        display: inline-block;
        width: 275px;
        height: 400px;
        .community-content-left-title {
          margin-left: 61px;
          height: 40px;
          img {
            display: inline-block;
            width: 40px;
            height: 40px;
          }
          span {
            font-size: 16px;
            color: #333;
          }
        }
        .community-content-left-list {
          border-right: solid 1px #eff0f1;
          margin-top: 25px;
          height: 310px;
          width: 300px;
          padding-right: 20px;
          .community-content-left-item {
            width: 275px;
            height: 40px;
            line-height: 40px;
            .community-content-left-item-left {
              width: 41px;
              text-align: center;
              display: inline-block;
              margin-right: 38px;
              font-size: 16px;
              color: #9599ac;
            }
            .community-content-left-item-center {
              width: 85px;
              text-align: right;
              display: inline-block;
              margin-right: 30px;
              font-size: 14px;
              color: #333;
            }
            .community-content-left-item-right {
              width: 73px;
              text-align: right;
              display: inline-block;
              color: #fa7321;
              font-size: 12px;
            }
          }
        }
      }
      .community-content-right {
        display: inline-block;
        float: right;
        width: 376px;
        height: 400px;
        .community-content-right-title {
          margin-left: 118px;
          height: 40px;
          img {
            display: inline-block;
            width: 40px;
            height: 40px;
          }
          span {
            font-size: 16px;
            color: #333;
          }
        }
        .tips-content {
          width: 376px;
          height: 70px;
          background-color: #f8fafd;
          border-radius: 1px;
          padding-left: 16px;
          padding-top: 10px;
          &:not(:last-child) {
            margin-bottom: 10px;
          }
          .tips-content-p {
            display: inline-block;
            color: #5c5c5c;
            font-size: 12px;
            width: 240px;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            overflow: hidden;
          }
          .tips-content-info {
            margin-top: 9px;
            font-size: 12px;
            height: 22px;
            line-height: 22px;
            img {
              width: 22px;
              height: 22px;
              display: inline-block;
              margin-right: 10px;
            }
          }
        }
      }
    }
    .community-news {
      background-color: #fff;
      float: right;
      width: 446px;
      height: 488px;
      display: inline-block;
      border: solid 1px #efefef;
      .community-news-title {
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 20px;
        height: 60px;
      }
      .community-news-content {
        margin-top: 9px;
        width: 100%;
        height: 380px;
        .community-news-main {
          padding-left: 22px;
          padding-right: 19px;
          height: 120px;
          margin-bottom: 30px;
          .community-news-main-left {
            width: 214px;
            height: 120px;
            display: inline-block;
            .community-news-main-left-title {
              margin-left: 7px;
              font-size: 14px;
              color: #333;
              width: 201px;
              height: 44px;
              display: inline-block;
            }
            .community-news-main-left-content {
              width: 201px;
              height: 12px;
              color: #5c5c5c;
              margin-left: 13px;
            }
          }
          .community-news-main-right {
            height: 120px;
            width: 169px;
            display: inline-block;
            position: relative;
            top: -10px;
            margin-left: 20px;
            img {
              width: 169px;
              height: 120px;
            }
          }
        }
        .community-news-item {
          padding-left: 22px;
          padding-right: 19px;
          height: 36px;
          width: 100%;
          color: #333;
          font-size: 14px;
          line-height: 36px;
          .item-tip {
            display: inline-block;
            margin-left: 8px;
            width: 385px;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            overflow: hidden;
          }
          .news-item-span {
            position: relative;
            bottom: 14px;
          }
          &:hover {
            background-color: #f6f8fd;
            color: #33b0ed;
            .radius-span {
              color: #33b0ed;
            }
          }
          &:not(:last-child) {
            margin-bottom: 5px;
          }
        }
      }
    }
  }
}
.station {
  margin-top: 70px;
  .station-title {
    font-size: 32px;
    color: #282e3f;
    width: 204px;
    margin: @centerMargin;
    margin-bottom: 50px;
  }
  .station-example {
    width: 1200px;
    margin: @centerMargin;
    .station-example-inner {
      height: 228px;
      width: 286px;
      display: inline-block;
      border: 1px solid red;
      &:not(:last-child) {
        margin-right: 18px;
      }
      img {
        width: 100%;
        height: 180px;
      }
      .station-example-name {
        font-size: 16px;
        color: #333;
        line-height: 48px;
        height: 48px;
        width: 286px;
        text-align: center;
      }
    }
  }
}
.back-img {
  width: 100%;
  height: 560px;
  position: relative;
  top: -114px;
  img {
    height: 560px;
    width: 100%;
  }
}
</style>
